<template>
  <div class="display-setting">
    <div class="setting-list">
      <div class="setting-item">
        <div class="setting-item__name">是否显示竣工日期和工序预计完成日期</div>
        <div class="setting-item__value">
          <a-radio-group
            @change="publicSetConfig"
            v-model="params.completeDate"
            :options="isNotOptions" />
        </div>
      </div>
      <div class="setting-item">
        <div class="setting-item__left">
          <div class="setting-item__name">是否显示服务团队联系方式</div>
          <div class="setting-item__search" v-if="params.busTeam.team">
              <SelectSearchMultiple
                :defaultSelectId="initSelectedIds"
                :default-select-list="defaultSelectFormList"
                :requestApi="getRoleList"
                :config="searchFormConfig"
                @change-select="changeForm"
              />
          </div>
        </div>
        <div class="setting-item__value">
          <a-radio-group @change="publicSetConfig" v-model="params.busTeam.team" :options="isNotOptions" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref} from "vue";
import { getConfig, setConfig } from "@/apis/system";
import SelectSearchMultiple from "@/components/selectSearchMultiple/index.vue";
import { Message } from "@arco-design/web-vue";
import { getRoleList } from "@/apis/role";

const isNotOptions = [{ label: "是", value: true }, { label: "否", value: false }];

const params: any = ref({
  completeDate: false,
  busTeam: {
    team: false,
    roleList: []
  }
});
const defaultSelectFormList: any = [];
const searchFormConfig = {
  label: "roleName",
  value: "roleId",
  keyword: "name"
};
const changeForm = (data: any) => {
  const handleData = data.map((item: any) => {
    return {
      roleId: item.roleId,
      roleName: item.roleName
    };
  });
  params.value.busTeam.roleList = handleData;
  publicSetConfig()
};

const publicSetConfig = async () => {
  await setConfig(params.value);
  await getConfigData();
  Message.success("修改成功");
};


const initSelectedIds  = ref([])
const getConfigData = async () => {
  const { data } = await getConfig();
  params.value.busTeam.team = data.busTeam?.team ?? false;
  params.value.busTeam.roleList = data.busTeam?.roleList ?? [];
  params.value.completeDate = data.completeDate ?? false;
  initSelectedIds.value = data.busTeam?.roleList?.map((item:any)=>item.roleId)

};
getConfigData();
</script>

<style scoped lang="scss">
.display-setting {
  padding: 21px 24px;

  .setting-list {
    .setting-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      background: #F5F7FA;
      border-radius: 4px;
      padding: 10px 10px 10px 20px;

      &__left {
        display: flex;
        align-items: center;
      }

      &__search {
        width: 350px;
        margin-left: 60px;
        display: flex;
        align-items: center;
        white-space: nowrap;

      }

      &__name {
        color: #4E5969;
        font-size: 14px;
      }
    }
  }
}
</style>
